<template>
  <div class="property-wrap">
    <div class="floor-list">
      <div
        v-for="(f, index) in floorData"
        :key="f.value"
        class="floor-item"
        :class="{ 'is-active': activeFloor === f.floorNo }"
        @click="floorClickHandle(f, index)"
      >
        {{ f.floorName }}
      </div>
    </div>
    <div v-if="activeFloor === 0" class="floor-content">
      <div
        class="floor-content-li"
        v-for="(item, index) in basicData"
        :key="index"
      >
        {{ item.typeName }}:
        <span class="floor-content-li-value">{{
          item.typeContent
        }}</span>
      </div>
    </div>
    <div v-else-if="activeFloor" class="floor-content">
      <div class="floor-content-top" v-if="bimType === 1">
        <div class="floor-content-top-name">
          {{ activeFloorName }}
        </div>
        <div class="floor-content-top-comp">
          <div class="floor-content-top-comp-num">
            <div class="floor-content-top-comp-pro">
              <img
                style="width: 16px; height: 16px"
                src="../../../../assets/bim/comp@2x.png"
                alt="企业数"
              />
              <span class="floor-content-top-comp-pro-name">
                企业数
              </span>
            </div>
            <div class="floor-content-top-comp-pro-num">
              {{ entCount }}
            </div>
          </div>
          <div class="floor-content-top-comp-line"></div>
          <div class="floor-content-top-comp-num">
            <div class="floor-content-top-comp-pro">
              <img
                style="width: 16px; height: 16px"
                src="../../../../assets/bim/people@2x.png"
                alt="人员数"
              />
              <span class="floor-content-top-comp-pro-name">
                人员数
              </span>
            </div>
            <div class="floor-content-top-comp-pro-num">
              {{ peopleCountTotal }}
            </div>
          </div>
        </div>
      </div>

      <div class="device-list">
        <div
          class="device-list-item"
          v-for="(ent, index) in floorInfoData"
          :key="index"
        >
          <div
            class="device-list-item-title"
            @click="entClick(ent)"
          >
            <span class="floor-content-ent-name">
              {{ ent.entName }}
            </span>
            <span class="floor-content-ent-people">
              {{ ent.peopleCount }}
            </span>
          </div>
          <div
            v-show="ent.checked"
            class="device-list-item-content"
          >
            <div
              v-for="(item, index) in ent.companyInfo"
              :key="index"
              style="margin-left: 8px"
            >
              · {{ item.name }}:
              {{ item.property }}
            </div>
          </div>
        </div>
      </div>
      <div class="floor-content-img">
        <el-image
          style="width: 300px; height: 210px"
          :src="floorPicUrl"
          :preview-src-list="picList"
        >
        </el-image>
      </div>
    </div>
  </div>
</template>

<script>
// import fileUrl from '@/api/info';
import { getAction } from '@/utils/helper'
import {
  buildingInfoQuery,
  buildingTotal,
  floorInfoQuery,
  galleryInfoQuery
} from '@/api/assets'
import axios from 'axios'

let _layerManager, _layers

export default {
  name: 'Property',
  props: ['activeStage', 'bimNumber'],
  data() {
    return {
      activeFloor: 0,
      activeFloorName: '',
      floorData: [],
      contentData: {},
      floorInfoData: [],
      entCount: '',
      peopleCountTotal: '',
      floorPicUrl: '',
      picList: [],
      floorOpacityStatus: true,
      layerId: '',
      stageId: '',
      basicData: [],
      bimType: 0
    }
  },
  computed: {
    defaultViewId() {
      return this.$store.state.layer.defaultViewId
    }
  },
  watch: {
    activeStage: {
      handler(newVal) {
        this.layerId = newVal.layerId
        this.stageId = newVal.stageId
        this.bimType = newVal.bimType
        this.dataMounted()
      },
      immediate: true
    }
  },
  async created() {
    const { layerManager } = await getAction(
      this.defaultViewId
    )
    _layerManager = layerManager
  },
  mounted() {
    this.layerId = this.activeStage.layerId
    this.stageId = this.activeStage.stageId
  },
  beforeDestroy() {
    if (_layers) {
      _layers.forEach((layer) => {
        layer.updateAllObjsVisible &&
          layer.updateAllObjsVisible(true)
      })
    }
  },
  methods: {
    dataMounted() {
      if (this.bimNumber) {
        // 初始化数据
        this.activeFloor = 0
        // bimType为1，楼栋的情况
        if (this.bimType === 1) {
          buildingInfoQuery({ code: this.bimNumber }).then(
            (res) => {
              if (res.success) {
                // 从楼栋id查到数据
                this.basicData = res.data
              }
            }
          )
          floorInfoQuery({ code: this.bimNumber }).then(
            (res) => {
              if (res.success) {
                this.floors = [
                  {
                    floorName: '整栋',
                    floorNo: 0
                  }
                ]
                let floors = []
                res.data.forEach((item) => {
                  floors.push(Number(item.floor))
                })
                floors = Array.from(new Set(floors))
                floors.sort()
                floors.forEach((val) => {
                  const obj = {
                    floorName: 'F' + val,
                    floorNo: Number(val)
                  }
                  this.floors.push(obj)
                })
                // 构建楼层信息
                this.floorData = this.floors
              }
            }
          )
        } else {
          buildingInfoQuery({ code: this.bimNumber }).then(
            (res) => {
              if (res.success) {
                this.basicData = res.data
              }
            }
          )

          galleryInfoQuery({ code: this.bimNumber }).then(
            (res) => {
              if (res.success) {
                this.floors = [
                  {
                    floorName: '管廊',
                    floorNo: 0
                  }
                ]
                let pipes = []
                res.data.forEach((item) => {
                  pipes.push(Number(item.pipeSection))
                })
                pipes = Array.from(new Set(pipes))
                pipes.sort()
                this.pipeInfo = []
                pipes.forEach((val) => {
                  const pipe = []
                  const obj = {
                    floorName: '分段' + val,
                    floorNo: Number(val)
                  }
                  this.floors.push(obj)
                  res.data.forEach((item) => {
                    if (
                      Number(item.pipeSection) ===
                      Number(val)
                    ) {
                      pipe.push(item)
                    }
                  })
                  this.pipeInfo.push(pipe)
                })
                this.floorData = this.floors
              }
            }
          )
        }
      }
    },
    entClick(item) {
      item.checked = !item.checked
    },
    floorClickHandle(item, index) {
      const find = _layerManager.layers.find(
        (item) => item.id === this.activeStage.layerId
      )
      if (find) {
        _layers = find.layer
        if (item.floorName === '整栋') {
          _layers.forEach((layer) => {
            layer.updateAllObjsVisible &&
              layer.updateAllObjsVisible(true)
          })
        } else {
          if (this.activeStage.dataService) {
            const dataService = decodeURI(
              this.activeStage.dataService
            )
            const url =
              dataService.substring(
                0,
                dataService.indexOf('/rest/data/') +
                  '/rest/data/'.length
              ) + 'featureResults.rjson?returnContent=true'
            const list = dataService
              .substring(
                dataService.indexOf(
                  '/rest/data/datasources/'
                ) + '/rest/data/datasources/'.length
              )
              .split('/datasets/')
            const sqlParameter = {
              datasetNames: [list.join(':')],
              getFeatureMode: 'SQL',
              queryParameter: {
                attributeFilter: `floor_number="${item.floorName}"`,
                fields: ['smid', 'floor_number']
              }
            }
            axios
              .post(url, JSON.stringify(sqlParameter))
              .then((res) => {
                // console.log('查询结果', res)
                if (res.data && res.data.features) {
                  const ids = res.data.features.map(
                    (item) => item.fieldValues[0]
                  )
                  // console.log('过滤id', ids)
                  _layers.forEach((layer) => {
                    layer.setObjsVisible &&
                      layer.setObjsVisible(ids, true)
                  })
                }
              })
              .catch((error) => {
                console.error(error)
              })
          }
        }
      }
      const { floorNo, floorName } = item
      if (floorNo !== this.activeFloor) {
        this.activeFloor = floorNo
        this.activeFloorName = floorName
      }
      if (floorNo !== 0) {
        if (this.bimType === 1) {
          buildingTotal({
            code: this.bimNumber,
            floor: floorNo
          }).then((res) => {
            if (res.success) {
              this.entCount = res.data.companyCount
              this.peopleCountTotal = res.data.peopleCount
              const jsonData = []
              res.data.buildingList.forEach((val) => {
                jsonData.push({
                  entName: val.name,
                  peopleCount: val.total,
                  checked: false,
                  companyInfo: [
                    {
                      name: '所处产业链',
                      property: val.industryChain
                    },
                    {
                      name: '主导企业',
                      property: val.leadIndustry
                    },
                    {
                      name: '产业链环节',
                      property: val.industryPart
                    }
                  ]
                })
              })
              this.floorInfoData = jsonData
            }
          })
        } else {
          if (this.pipeInfo && index > 0) {
            const jsonData = []
            this.pipeInfo[index - 1].forEach((item) => {
              jsonData.push({
                entName: item.pipeType,
                peopleCount: item.length,
                checked: false,
                companyInfo: [
                  {
                    name: '直径',
                    property: item.diameter
                  },
                  {
                    name: '通风口',
                    property: item.ventilator
                  },
                  {
                    name: '吊装口',
                    property: item.installer
                  },
                  {
                    name: '逃生口',
                    property: item.exits
                  }
                ]
              })
            })
            this.floorInfoData = jsonData
          }
        }
      }
      // if (floorNo != 0) {
      //   getFloorInfo(
      //     this.layerId,
      //     this.stageId,
      //     floorNo
      //   ).then((res) => {
      //     if (res.code === 1 && res.data) {
      //       const jsonData = res.data
      //
      //       this.floorInfoData = jsonData.data
      //       this.entCount = jsonData.entCount
      //       this.peopleCountTotal =
      //         jsonData.peopleCountTotal
      //       this.floorPicUrl = `data:image/png;base64,${jsonData.picUrl}`
      //       this.picList = [
      //         `data:image/png;base64,${jsonData.picUrl}`
      //       ]
      //     }
      //   })
      // }
    }
  }
}
</script>

<style scoped lang="scss">
.property-wrap {
  display: flex;
}

.select-floor-wrap {
  position: absolute;
  left: calc(100% + 8px);
  top: 10px;
  background: rgba(25, 47, 61, 0.85);
  min-width: 50px;
  min-height: 100px;
  border-radius: 4px;
  display: flex;
  flex-wrap: wrap;
}

.change-color-wrap {
  position: absolute;
  left: 4px;
  top: -80px;
  height: 50px;
  display: flex;
  align-items: center;
  color: white;
}

.floor-list {
  width: 125px;

  .floor-item {
    /*width: 60px;*/
    height: 32px;
    line-height: 32px;
    margin: 10px 14px;
    border-radius: 1px;
    text-align: center;
    cursor: pointer;
    color: white;
    font-size: 14px;
    background: url('../../../../assets/bim/floor_uncheck@2x.png');
    /*background: rgba(73, 89, 98, 0.6);*/
    /*transform: skewX(-15deg);*/
  }

  .floor-item.is-active {
    background: url('../../../../assets/bim/floor_check@2x.png');
    /*background: rgba(0, 210, 255, 0.6);*/
  }
}

.floor-content {
}

.floor-content-li {
  margin-top: 20px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 800;
  color: #d2e6f0;
  height: 15px;
  line-height: 15px;
}

.floor-content-li-value {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #ffffff;
}

.floor-content-top {
  margin-left: 10px;
  margin-top: 10px;
  width: 300px;
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: center;
}

.floor-content-top-name {
  width: 68px;
  height: 64px;
  font-size: 22px;
  font-family: PingFang SC;
  font-weight: 800;
  color: #ffffff;
  background: url('../../../../assets/bim/floor_top_name.png');
  line-height: 64px;
  text-align: center;
}

.floor-content-top-comp {
  flex: 1;
  height: 56px;
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: center;
  background: url('../../../../assets/bim/floor_top_num.png');
}

.device-list {
  display: block;
  margin-top: 10px;

  .device-list-item {
    margin: 5px 20px;
  }

  .device-list-item-title {
    height: 26px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 26px;
    background: rgba(2, 125, 180, 0.2);
    cursor: pointer;
  }

  .device-list-item-content {
    margin-left: 10px;
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #d2e6f0;
    line-height: 26px;

    border-radius: 2px;
  }
}

.floor-content-top-comp-num {
  flex: 1;
  height: 100%;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
}

.floor-content-top-comp-pro {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #ffffff;
  height: 30px;
  line-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.floor-content-top-comp-pro-name {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 33px;
}

.floor-content-top-comp-pro-num {
  flex: 1;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 800;
  color: #ffffff;
  height: 20px;
  line-height: 20px;
  text-align: center;
}

.floor-content-top-comp-line {
  width: 1px;
  height: 30px;
  background: rgba(15, 48, 83, 0.5);
  border: 1px solid rgba(0, 112, 149, 0.5);
  border-radius: 50%;
}

.floor-content-ent {
  margin-top: 10px;
  margin-left: 10px;
  width: 300px;
}

.floor-content-ent-li {
  margin-top: 10px;
  height: 20px;
  width: 100%;
  line-height: 20px;
}

.floor-content-ent-name {
  float: left;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #d2e6f0;
  line-height: 26px;
}

.floor-content-ent-people {
  float: right;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #d2e6f0;
  line-height: 26px;
}

.floor-content-img {
  margin-top: 20px;
  margin-left: 10px;
  width: 300px;
  height: 210px;
}
</style>
